<template>
	<view>
		<view class="my-page-content page-con">
			<view class="my-title mb50">发布房源</view>
			<view class="flex-between mb50 ">
				<view>
					<view>基本信息 </view>
					<view class="grey-tips">填写房源位置、基本信息</view>
				</view>
				<view @click="goPage(0)" class="f28">
					<span class="color-orange" v-if="formData.completion_progress.baseInfo == 0">
						去编辑
						<uni-icons color="#EC8403" class="my-right-icon color-orange" type="right"
							size="18"></uni-icons>
					</span>
					<span v-else>
						已完成
						<uni-icons class="my-right-icon" type="right" size="18"></uni-icons>
					</span>
				</view>
			</view>

			<view class="flex-between mb50 ">
				<view>
					<view>设施服务 </view>
					<view class="grey-tips">提交房屋配套设施、照片</view>
				</view>
				<view @click="goPage(1)" class="f28">
					<span class="color-orange" v-if="formData.completion_progress.facility == 0">
						去编辑
						<uni-icons color="#EC8403" class="my-right-icon color-orange" type="right"
							size="18"></uni-icons>
					</span>
					<span v-else>
						已完成
						<uni-icons class="my-right-icon" type="right" size="18"></uni-icons>
					</span>
				</view>
			</view>
			<view class="flex-between mb50 ">
				<view>
					<view>房屋价格 </view>
					<view class="grey-tips">设置房间信息、出租价格、排期</view>
				</view>
				<view @click="goPage(2)" class="f28">
					<span class="color-orange" v-if="formData.completion_progress.room == 0">
						去编辑
						<uni-icons color="#EC8403" class="my-right-icon color-orange" type="right"
							size="18"></uni-icons>
					</span>
					<span v-else>
						已完成
						<uni-icons class="my-right-icon" type="right" size="18"></uni-icons>
					</span>
				</view>
			</view>
			<view class="flex-between mb50 ">
				<view>
					<view>入住须知 </view>
					<view class="grey-tips">设置入住要求、退订政策</view>
				</view>
				<view @click="goPage(3)" class="f28">
					<span class="color-orange" v-if="formData.completion_progress.notice == 0">
						去编辑
						<uni-icons color="#EC8403" class="my-right-icon color-orange" type="right"
							size="18"></uni-icons>
					</span>
					<span v-else>
						已完成
						<uni-icons class="my-right-icon" type="right" size="18"></uni-icons>
					</span>
				</view>
			</view>
		</view>

		<updateErweima @updateQrcode="getUserInfo" ref="erweimaRef">
			<slot>
				<view class="grey-tips">
					展示于房源信息页，方便房客联系您，如后续需要修改，请至「我的」个人资料页面修改
				</view>
			</slot>
		</updateErweima>

		<van-dialog confirm-button-class="color-orange" id="van-dialog" />

		<footBtn @nextStep="nextStep" :disableBtn="!checkedNotice" @cancel="deleteHouseInfo" btnText="确定提交" :type="2">

			<view class="btn-tips center-all" slot="tips">
				<van-checkbox checked-color="#FCE353" :value="checkedNotice" shape="square"
					@change="checkedNotice = !checkedNotice">
					确定提交代表您已阅读并同意
				</van-checkbox>
				<span @click="jump" class="color-orange"> 《 房东服务条款》</span>
			</view>
		</footBtn>
	</view>
</template>

<script>
	import footBtn from '@/components/myBtn/footBtn.vue'
	import Dialog from 'wxcomponents/vant/dialog/dialog';
	import updateErweima from '@/components/updateErweima.vue';



	export default {
		components: {
			footBtn,
			updateErweima
		},
		data() {
			return {
				houseId: this.$getStorage('houseId'),
				formData: {},
				checkedNotice: false,
				userInfo: this.$getStorage('userInfo'),
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				if (this.houseId) {
					this.getMyHouseInfo();
				}
			},
			getMyHouseInfo() {
				this.$http.getMyHouseInfo(this.houseId).then(res => {
					this.formData = res;
				})
			},
			deleteHouseInfo() {
				Dialog.confirm({
						title: '提示',
						message: '是否确定删除该房源',
					})
					.then(() => {
						this.$http.deleteHouse(this.houseId).then(res => {
							this.$goPage(3, '/pages/index/index');
							this.$setStorage('houseId', '');
							this.$toast('删除成功')
						});

					})

			},
			showerweima() {
				this.$refs.erweimaRef.show();
			},
			getUserInfo() {
				this.$http.getUserInfo().then(res => {
					this.$setStorage('userInfo', res)
					this.userInfo = res;
				})
			},
			goPage(index) {
				let pathList = ['/subPublishHouse/baseInfo/setHouseInfo', '/subPublishHouse/device/index',
					'/subPublishHouse/setPrice/index', '/subPublishHouse/notice/setCheckIn'
				];
				this.$goPage(1, pathList[index]);
			},
			jump() {
				this.$goPage(1, '/subNotice/landlady');
			},
			nextStep() {
				const data = this.formData.completion_progress;
				if (data.baseInfo == 0) {
					this.$toast('请填写房源位置、基本信息');
					return;
				} else if (data.facility == 0) {
					this.$toast('请提交房屋配套设施、照片');
					return;
				} else if (data.room == 0) {
					this.$toast('请设置房间信息、出租价格、排期');
					return;
				} else if (data.notice == 0) {
					this.$toast('请设置入住要求、退订政策');
					return;
				} else if (!this.checkedNotice) {
					this.$toast('请仔细阅读房东服务条款并勾选已阅读');
					return;
				}
				
				if (!this.userInfo.qr_code) {
					this.$toast('请上传管家二维码');
					this.showerweima();
					return;
				}

				this.$http.setHouseSubmit({
					id: this.houseId
				}).then(res => {
					this.$goPage(1, '/subPublishHouse/resultTips');
					this.$setStorage('houseId', res.id);
					this.$toast('保存成功')
				});

			}

		}

	}
</script>

<style lang="scss" scoped>
	.page-con {
		padding: 50rpx 30rpx 80rpx 50rpx;
	}

	.btn-tips {
		margin-bottom: 30rpx;
		font-size: 26rpx;
		color: #999999;
		// margin-left: 50rpx;
		// text-indent: 50rpx;
	}
</style>
<style>
	/* .color-orange {
			color: #EC8403!important;
	} */
</style>